<!DOCTYPE html>
<html>
<head>
    <title>添加购物车商品列表</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <style type="text/css">
        .content {
            width: 1000px;
            margin: 100px auto;
        }

        img {
            width: 40px;
            height: 50px;
        }

        .amount-sum {
            float: right;
            color: #999;
            height: 30px;
            line-height: 20px;
            margin: 7px 0 0;
            cursor: pointer;
        }

        .price-sum {
            float: right;
            height: 30px;
            line-height: 20px;
            margin: 7px 5px 0 10px;
            color: #666;
            width: auto;
            position: relative;
        }

        .price-sum em {
            font-size: 16px;
            color: #E2231A;
            font-weight: 700;
        }
    </style>
</head>
<body>

<div class="content">
    <!-- 商品列表 -->
    <table class="table table-bordered" id="goods-table">
        <thead>
        <th>序号</th>
        <th>图片</th>
        <th>电影名称</th>

        <th>价格</th>
        <th>数量</th>
        <th>操作</th>
        </thead>
        <tbody>

        <tr v-for="(good, index) in goods">
            <td>{{good.id}}</td>
            <td><img :src='good.imgUrl'/></td>
            <td>{{good.name}}</td>
            <td>{{good.price}}</td>

            <td>
                <button v-on:click="reduce(good)">-</button>
                <input type="text" type="number" v-model="good.default_nums"/>
                <button v-on:click="good.default_nums += 1">+</button>
            </td>

            <td>
                <button class="btn btn-sm btn-danger" v-on:click="addToCar(good)">加入购物车</button>

                <div class="amount-sum">已选择
                    <em>{{good.add_nums}}</em>件商品
                    &nbsp;
                </div>

                <div class="price-sum">总价:
                    <em>￥{{ parseFloat(good.add_nums * good.price).toFixed(2)}}</em>
                </div>
            </td>
        </tr>
        </tbody>

        <tfoot>
        <tr>
            <td colspan="6">

                <button class="btn btn-danger pull-right" v-on:click="balance()">结算</button>
            </td>
        </tr>
        </tfoot>
    </table>
</div>

<!-- js -->
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/shopping_cart.js">
</script>
</body>
</html>
